import * as echarts from '../../../ec-canvas/echarts';

var app = getApp();
var __ctxPath = app.__ctxPath;

Page({
  data: {
    tabCur: 0 //当前tab下标
    , tabList: [{name: '成本价趋势图'}, {name: '表格'}] //tab列表名称
    , ec: { //图表实例
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    }
    , yxcGood: null //商品
    , isLoadListData: false
    , listData: [
      // { "date": "2019/01/01", "costPrice": "11" },
      // { "date": "2019/01/01", "costPrice": "12" },
      // { "date": "2019/01/01", "costPrice": "13" },
      // { "date": "2019/01/01", "costPrice": "14" },
      // { "date": "2019/01/01", "costPrice": "15" },
      // { "date": "2019/01/01", "costPrice": "16" },
      // { "date": "2019/01/01", "costPrice": "17" }
    ], echartData: null
  }
  /**
   * 选择tab
   */
  ,tabSelect(e) {
    let tabCur = e.currentTarget.dataset.id;
    this.setData({
      tabCur: tabCur
    });
    //重新渲染echart
    if (0 == tabCur){
      initChart(this);
    }else{
      if (this.data.isLoadListData) return;
      
      var that = this;
      wx.showLoading({ title: '数据加载中' });
      setTimeout(() => {
        //响应可能超时，为了提高用户体验，所以取消加载框
        wx.hideLoading();
      }, 5 * 1000);
      wx.request({
        url: __ctxPath + '/outsideInterface/YxcOutsideInterface.do?method=listYxcPriceManager',
        data: { glid: that.data.yxcGood.lid },
        success: function (res) {
          //console.log(res.data);
          wx.hideLoading(); // 隐藏加载框
          if ("0" != res.data.code) {
            wx.showToast({
              title: res.msg,
              icon: 'none',
              duration: 2000//持续的时间
            });
          } else {
            that.setData({
              listData: res.data.data
              , isLoadListData: true
            });
          }
        }
      });
    }
  }
  /**
   * 生命周期函数--监听页面加载
   */
  ,onLoad: function (options) {
    let vo = JSON.parse(options.vo);
    this.setData({yxcGood: vo});

    // 请求获取数据，然后渲染图表
    wx.request({
      url: __ctxPath + '/outsideInterface/YxcOutsideInterface.do?method=chartYxcPriceManager',
      data: { glid: this.data.yxcGood.lid },
      success: res => {
        this.setData({ echartData: res.data.data});
        initChart(this);
      }
    });

  }
})

function initChart(that) {
  that.selectComponent('#mychart-dom-bar').init((canvas, width, height, dpr) => {
    // 获取组件的 canvas、width、height 后的回调函数
    // 在这里初始化图表
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr // new
    });
    setOption(chart, that);

    // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
    that.chart = chart;

    that.setData({
      isLoaded: true,
      isDisposed: false
    });

    // 注意这里一定要返回 chart 实例，否则会影响事件处理等
    return chart;
  });
}

function setOption(chart, that) {
  var echartData = that.data.echartData;
  for (var data of echartData){
    data.type = 'line';
    data.itemStyle = { normal: { label: { show: true } } };
  }

  var option = {
    title: {
      top: '3%'
      ,text: that.data.yxcGood.name
      ,left: 'center'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
    },
    series: echartData
      // [{
      //   name: '供应商A',
      //   type: 'line',
      //   itemStyle: { normal: { label: { show: true } } },
      //   data: [
      //     { value: ["2020/5/10", 600] }
      //     , { value: ["2020/5/11", 374] }
      //     , { value: ["2020/5/15", 400] }
      //   ]
      // },{
      //   name: '供应商B',
      //   type: 'line',
      //   itemStyle: { normal: { label: { show: true } } },
      //   data: [
      //     { value: ["2020/5/9", 400] }
      //     , { value: ["2020/5/11", 274] }
      //     , { value: ["2020/5/15", 400] }
      //   ]
      // }]


  };

  chart.setOption(option);
}

